<template>
	<view class="content">
		<view class="input">
			<image src="../../static/search.png" class="search"></image>
			<input class="inp" @confirm="keyword_action" @click="account('')" type="text" :value="keyword"  placeholder="搜索区服/职业/等级..."/>
		</view>
		
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in banner_list">
					<view class="swiper-item uni-bg-red"><image :src="item.image" class="banner"></image></view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item uni-bg-green"><image src="../../static/banner.png" class="banner"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue"><image src="../../static/banner.png" class="banner"></image></view>
				</swiper-item> -->
			</swiper>
		</view>
		
		
		 <view class="gg">
		    <view class='tongzhitext'>
		      <image src="../../static/advice.png" mode="widthFix" style="width: 30rpx; z-index: 4; height: 30rpx; position: absolute;top: 18rpx; left: 15rpx;"></image>
		      <view class="tongzhi-text" style="z-index: 3;">{{ad_text}}</view>
		    </view>
		  </view>

		
		<image :src="advice" style="margin-left: 3%;width: 94%;margin-top: 20px;height: 150rpx;"></image>
		
		<view class="list">
			<view class="lists" >
				<view @click="account(item.title)" v-for="(item,index) in game_list">
					<image :src="item.image" ></image>
					<view class="text">{{item.title}}</view>
				</view>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view style="height: 200rpx;"></view>
		
		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick"
		        :color="color" :selectedColor="selectedColor"></custom-tab-bar>
	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';  
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
	    components: {
			CustomTabBar  
	    },
	    data() {
	        return {
				ad_text:'',
				keyword:'',
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				duration: 500,
				banner_list:[],
				game_list:[],
				currentTab: 0, // 当前选中的tab索引  
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				
				advice:'',
			}
		},
		onLoad() {
			this.banner()
			this.game()
			this.ad_texts()
			this.advice_img()
			
		},
		methods: {
			advice_img(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/advice_img',
					method:'POST',
					data: { // 请求的参数
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.advice = res.data.data
					}
				})
			},
			ad_texts(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/ad_text',
					method:'POST',
					data: { // 请求的参数
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.ad_text = res.data.data
					}
				})
			},
			keyword_action(){
				console.log(this.keyword)
			},
			account(title){
				uni.navigateTo({
					url:'/pages/index/account?title='+title
				})
			},
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发  
			   //this.currentTab = index;  
			   
			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
			 banner(){
				 var that = this
				 uni.request({
				 	url:getApp().globalData.host+'srapi/home/banner',
					method:'POST',
					data: { // 请求的参数
					    
					},
					header: { // 设置请求的header
					    'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.banner_list = res.data.data
					}
				 })
			 },
			 game(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/game',
					method:'POST',
					data: { // 请求的参数
						
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.game_list = res.data.data
					}
				 })
			 }
		},
		
	}
</script>

<style lang="less" scoped>
	/* #ifdef H5 */
	page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
	/* #endif */
	.input{
		width: 94%;
		margin-left: 3%;
		height: 73rpx;
		background-color: #fff;
		border-radius: 50rpx;
		display: flex;
		margin-top: 40rpx;
	}

	page {
	    padding-bottom: 140rpx;
	}
	
	.search{
	  width: 27rpx;
	  height: 27rpx;
	  margin-right: 5%;
	  margin-left: 5%;
	  margin-top: 20rpx;
	}
	
	.banner{
		width: 100%;height: 100%;
	}
	
	.inp{
	  font-size: 28rpx;
	  height: 73rpx;
	  line-height: 73rpx;
	  width: 60%;
	}

	.uni-margin-wrap {
		width: 94%;
		margin-left: 3%;
		margin-top: 20px;
	}
	.swiper {
		height: 369rpx;
	}
	.swiper-item {
		display: block;
		height: 369rpx;
		line-height: 369rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.advice{
		margin-top: 20px;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		width: 94%;
		margin-left: 3%;
		height: 35px;
	}
	.advice_text{
		font-size: 24rpx;height: 35px; line-height: 35px;	  animation: remindMessage 15s linear infinite;

	}
	.list{
		width: 94%;margin-left: 3%;border-radius: 20rpx; height: auto; background-color: #fff;margin-top: 20rpx;
	}
	.lists{
		width: 100%;margin-top: 20rpx; padding-top: 20rpx;
	}
	.lists view{
		margin-left: 4.5%;
		float: left;
		width: 112rpx;
	}
	.lists image{
		width: 112rpx;
		height: 112rpx;
		margin: auto;
	}
	.lists .text{
		width: 112rpx;
		height: 30rpx;
		font-size: 22rpx;
		line-height: 30rpx;
		text-align: center;
		margin-bottom: 20rpx;
		margin-left: 0%;
	}
	
	
	@keyframes remindMessage {
	  0% {
	    -webkit-transform: translateX(90%);
	  }
	 
	  100% {
	    -webkit-transform: translateX(-180%);
	  }
	}
	 
	.gg{
	  /* position: fixed;
	  top: 12%;
	  left: 3%; */
	  z-index: 2;
	  background-color: #fff;
	  opacity: 0.8;
	  width: 94%;
	  margin-left: 3%;
	  position: relative;
	  border-radius: 10rpx;
	  padding-top: 10rpx;
	  padding-bottom: 11rpx;
	  margin-top: 40rpx ;
	  margin-bottom: 0rpx ;
	}
	.tongzhitext {
	  width: 90%;
	  line-height: 50rpx;
	  margin-left:10%;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  
	}
	 
	.tongzhi-text {
	  font-size: 28rpx;
	  animation: remindMessage 15s linear infinite;
	  width: 100%;
	  color: #000;
	  display: block;
	}
</style>